<template>
	<view class="center">
		<view class="conditions">
			<view class="left">
				<xbd-select :carId.sync="type" :visible.sync="visible" :option.sync="option" :infoList="infoList">
					<template>
						<view class="select" @click="visible = true">
							<view class="text">
								{{ type  }}
							</view>
							<image class="image" src="@/static/image/down.svg">
							</image>
						</view>
					</template>
				</xbd-select>
			</view>
			<view v-if="types == 0" class="search">
				<uni-easyinput class="uni-mt-5" placeholderStyle=" font-size:32rpx; color:#A0A7B8;" suffixIcon="search"
					v-model="info.keyword" placeholder="搜索内容" @iconClick="iconClick">
				</uni-easyinput>
			</view>
		</view>
		<uni-list v-if="types == 0" :border="false">
			<xbd-report-card :msgInfo="item" v-for="(item,index) in showList" :key="index"></xbd-report-card>
			<xbd-null-list v-if="!showList.length"></xbd-null-list>
			<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
			</xbd-loading-more>
		</uni-list>
		<uni-list v-else-if="types == 1" :border="false">
			<xbd-financial-card :msgInfo="item" v-for="(item,index) in showList" :key="index"></xbd-financial-card>
			<xbd-null-list v-if="!showList.length"></xbd-null-list>
			<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
			</xbd-loading-more>
		</uni-list>
		<uni-list v-else-if="types == 2" :border="false">
			<xbd-bonus-card :msgInfo="item" v-for="(item,index) in showList" :key="index"></xbd-bonus-card>
			<xbd-null-list v-if="!showList.length"></xbd-null-list>
			<xbd-loading-more v-if="showList.length" :status-num="statusNum" :is-load-more="isLoadMore">
			</xbd-loading-more>
		</uni-list>
	</view>
</template>

<script>
	import {
		Supervision
	} from '@/api/index.js';
	export default {
		data() {
			return {
				option: '',
				visible: false,
				type: "全部类型",
				types: 0,
				statusNum: 0,
				isLoadMore: false,
				value: '',
				showList: [],
				infoList: [],
				info: {
					page: 1,
					perpage: 10,
					type: '',
					keyword: ''
				}
			};
		},
		watch: {
			type(newv, oldv) {
				this.info.type = this.option
				this.info.page = 1
				this.init()
			}
		},
		methods: {
			// 搜索
			iconClick() {
				this.info.page = 1;
				console.log('就是玩')
				this.init()
			},
			async init() {
				console.log(this.info, 'info')
				let res
				if (this.types == 0) {
					res = await Supervision.getServiceList(this.info)
				} else if (this.types == 1) {
					res = await Supervision.getValueList(this.info)
				} else {
					res = await Supervision.getSalaryList(this.info)
				}
				console.log(res, 'res3')
				if (res.data.list.length === this.info.perpage) {
					this.isLoadMore = true;
					this.statusNum = 2;
				}
				this.showList = res.data.list
			},
			// 加载更多
			loadmore() {
				this.info.page++;
				this.statusNum = 1;
				this.isLoadMore = true;
				this.loadmoreList();
			},
			async loadmoreList() {
				let res
				try {
					if (this.types == 0) {
						res = await Supervision.getServiceList(this.info)
					} else if (this.types == 1) {
						res = await Supervision.getValueList(this.info)
					} else {
						res = await Supervision.getSalaryList(this.info)
					}

					if (res.data.list.length) {

						this.showList = this.showList.concat(res.data.list);
						if (res.data.list.length === this.info.perpage) {
							this.statusNum = 2;
						} else {
							this.statusNum = 0;
						}
						// this.isLoadMore = false;
					} else {
						this.info.page--;
						this.statusNum = 0;
					}
				} catch (e) {
					uni.hideLoading();
					this.info.page--;
				}
			},
			eventCallback(val) {
				console.log(val, 'val')
				this.showList = this.showList.filter(item => {
					return item._id !== val
				})
			},
			// updataList(){
			// 	this.info.page=1
			// 	this.init()
			// 	uni.pageScrollTo({
			// 				    scrollTop: 0,
			// 				});
			// }
		},
		async onLoad(res) {
			uni.$on('update', this.eventCallback)
			this.types = res.type
			if (this.types == 0) {
				this.infoList = [{
						value: '',
						label: '全部类型'
					},
					{
						value: '内部招待',
						label: '内部招待'
					},
					{
						value: '外部招待',
						label: '外部招待'
					}
				]
			} else if (this.types == 1) {
				this.infoList = [{
						value: '',
						label: '全部类型'
					},
					{
						value: '工程款报销',
						label: '工程款报销'
					},
					{
						value: '差旅报销',
						label: '差旅报销'
					},
					{
						value: '借款报销',
						label: '借款报销'
					}
				]
			} else {
				this.type = "全部状态",
					this.infoList = [{
							value: '',
							label: '全部状态'
						},
						{
							value: 'wait',
							label: '待审查'
						},
						{
							value: 'successed',
							label: '合格'
						},
						{
							value: 'refused',
							label: '不合格'
						}
					]
			}
			// uni.$on('updateList',this.updataList);
			await this.init()

		},
		
		onUnload() {
			// 卸载页面事件监听
			uni.$off('update');
			// uni.$off('updateList');
		},
		async onShow() {
			this.info.page=1;
			await this.init()
					uni.pageScrollTo({
					    scrollTop: 0,
					});
				},
		// 触底触发
		onReachBottom() {
			// 当下拉组件显示状态 并且显示不是没有数据了 时才进行下拉加载
			console.log('触底操作')
			if (this.isLoadMore && this.statusNum !== 0) {
				this.loadmore();
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-icons {
		margin-right: 20rpx;
	}

	::v-deep .uni-easyinput__content-input {
		font-size: 30rpx;
	}

	::v-deep .uni-easyinput__content {
		height: 72rpx !important;
	}

	::v-deep .uni-list {
		background-color: transparent;
		border-radius: 16rpx;
		// &:nth-child(n){
		// 	margin-bottom: 40rpx;
		// }
	}

	.center {
		padding: 0 32rpx 32rpx;

		.left {
			flex: 1;
		}

		.conditions {
			width: 750rpx;
			margin-left: -32rpx;
			background-color: #FFFFFF;
			display: flex;
			margin-bottom: 20rpx;
			box-sizing: border-box;
			padding: 20rpx 32rpx;

			.select {
				border-radius: 8rpx;
				border: 2rpx solid #D0D6E5;
				width: 100%;
				height: 72rpx;
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;
				color: #8890a5;

				.type {
					font-size: 30rpx;
				}

				image {
					width: 28rpx;
					height: 30rpx;
				}
			}
		}

		// background-color: #fff;
		.search {
			height: 72rpx;
			margin-left: 22rpx;
			width: 420rpx;
		}

		.uni-mt-5 {
			margin-bottom: 20rpx;
		}
	}
</style>
